<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>layout</title>
  <style>
        .kuang {
            width: 600px;
            min-height: 500px;
            max-height: 296px;
            border: 1px solid;
            float: left;
            display: block;
            position: relative;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    template data: {{ . }}
    <div class="container">
        <div class="row">
              <div class="jumbotron  bg-dark">
                <h1 class="jumbotron-heading">WebSocket chat,欢迎使用:</h1>
              </div>
            <div class="input-group text-left">
                <button id="conn">连接</button>
                <button id="close">断开</button>
            </div>
            <div class="input-group text-muted">
                <div class="kuang" id="mess"></div>
            </div>
         <hr class="featurette-divider">
            <div class="input-group text-left">
                <input type="text" class="value" id="value1" />
                <button id="send">发送</button>
            </div>
            <div class="input-group text-left">
                <label>输入用户名：</label>
                <input type="text" id="name1" />
                <button id="rename">改名</button>
            </div>
            <div class="input-group text-left">
                <label>房间：</label>
                <input type="text" id="room" />
                <button id="join">进入</button>
            </div>
            <div class="input-group text-left">
                <button id="hall">返回大厅</button>
            </div>
        </div>
    </div>
</html>

<script language="javascript"type="text/javascript">
    var ws;
    var h = 0;
    setInterval("heartBeat()",5000)
    document.getElementById("conn").onclick = function (e) {
        if(ws){
            alert("已经连上websocket")
            return
        }
        ws = new WebSocket('ws://127.0.0.1:8080/ws');
        ws.onopen = function (e) {
            console.log("连接服务器成功");
            showMsg("连接服务器成功");
        }
        ws.onmessage = function (e) {
            if(e.data == "heartBeat"){
                h = 0
            }
            showMsg(e.data);
        }
        ws.onerror = function (evt) {
           alert(evt.data)
        };
    }
    document.getElementById("close").onclick = function (e) {
        if(ws){
            ws.onclose = function (e) {
                  console.log("链接断开");
             }
            showMsg("链接断开");
            ws = null
        }else{
            alert("已经没有连上websocket")
            return
        }
    }
    document.getElementById("send").onclick = function (e) {
        if(!value1.value){
            return
        }
        if(ws){
            ws.send(value1.value);
        }

    }
    document.getElementById("rename").onclick = function (e) {
        if(!name1.value){
            return
        }
        if(ws){
            ws.send("name|" + name1.value);
        }
    }
    document.getElementById("join").onclick = function (e) {
        if(!room.value){
            return
        }
        if(ws && parseInt(room.value)){
            ws.send("room|" + parseInt(room.value));
        }
    }
    document.getElementById("hall").onclick = function (e) {
        if(ws){
            ws.send("room|0");
        }
    }

    heartBeat = function(){
       if(ws){
           if(h >= 5){
               ws = null
                showMsg("服务器超时");
           }
           try{
                ws.send("heartBeat");
           }
           catch(err)
           {
            console.log(err);
            }
           h++;
            console.log("发送心跳");
       } 
    }
    

//     if(window.WebSocket){
//        console.log('This browser supports WebSocket');
//        websocket = new WebSocket("ws://127.0.0.1:8080/ws");
//        if(websocket){
//            websocket.onopen = function(evt) {
//                console.log(evt)
//            };
//        }
//    }else{
//        console.log('This browser does not supports WebSocket');
//    }
function showMsg(msg){
    var time = new Date();
    mess.innerHTML += formatTime(time.toUTCString(), "yyyy-MM-dd HH:mm:ss") + " " + ":" + msg + "<br>";
}
var formatTime = function(time,format)
{
var t = new Date(time);
var tf = function(i){return (i < 10 ? '0' : '') + i};
return format.replace(/yyyy|MM|dd|HH|mm|ss/g,function(a){
switch(a){
case 'yyyy':
return tf(t.getFullYear());
break;
case 'MM':
return tf(t.getMonth() + 1);
break;
case 'mm':
return tf(t.getMinutes());
break;
case 'dd':
return tf(t.getDate());
break;
case 'HH':
return tf(t.getHours());
break;
case 'ss':
return tf(t.getSeconds());
break;
}
})
}
</script>
